<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- <el-card shadow="never"> -->
        <!-- 学科管理
        <el-form>
          <h3>{{form.name}}</h3><el-form-item>
            <el-select v-model="form.province">
              <el-option v-for="item in list" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              </el-form-item>
        </el-form> -->

        <!-- 顶部工具栏 -->
        <el-row class="page-tools" style="padding-left: 10px">
          <!-- 左侧 -->
          <el-col :span="18">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="学科名称">
                <el-input v-model="input"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="removeList">清除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="searchList"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 右侧 -->
          <el-col :span="6" style="text-align: right">
            <el-button type="success" size="samll" icon="el-icon-edit" @click="showDialog()"
              >新增学科</el-button
            >
          </el-col>
        </el-row>
        <!-- 信息提示 -->
        <el-alert
          :title="`数据一共${total}条`"
          :closable="false"
          type="info"
          show-icon=""
        >
        </el-alert>
        <!-- 显示表格 -->
        <el-table
          :data="list"
          style="width: 100%; margin-top: 15px"
          :header-cell-style="{
            background: '#fafafa',
            color: '#909399',
            height: '60px',
          }"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="subjectName"
            label="学科名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            align="center"
            width="200"
          >
            <template #default="{ row }">
              {{ formDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            align="center"
            width="120"
          >
            <template #default="{ row }">
              {{ hireEnum[row.isFrontDisplay] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="tags"
            label="标签"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totals"
            label="题目数量"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="240">
            <template #default="{ row }">
              <el-button type="text" size="big" @click="toDirectorys(row.id,row.subjectName)">学科分类</el-button>
              <el-button type="text" size="big" @click="toTags(row.id,row.subjectName)">学科标签</el-button>
              <el-button type="text" size="big" @click="showUpdateDialog(row)">修改</el-button>
              <el-button type="text" size="big" @click="removeSubject(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
<!-- 分页器 -->
<el-row type="flex" justify="end" style="margin-top:15px">
<page-tool
:total="total"
:paginationPage="params.page"
:paginationPagesize="params.pagesize"
@pageSizeChange="handleSizeChange"
@pageChange="handleCurrentChange"
>

</page-tool>
</el-row>
      </el-card>
    </div>
    <!-- 添加的弹窗 -->
    <subject-add
    ref="dialogRef"
    :dialogVisible="dialogVisible"
    :isEdit="isEdit"
    :params="params"
    @close-dialog="closeDialog"
    @get-subject-list="getSubjectList"
    ></subject-add>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  list as getSubjectList,
  remove as removeSubject
} from '@/api/hmmm/subjects.js'
import subjectAdd from '../components/subjects-add.vue'
import PageTool from '../../module-dashboard/components/pageTool.vue'
export default {
  components: { subjectAdd, PageTool },
  data () {
    return {
      input: '',
      list: [], // 从接口处取回 学科列表数据
      params: { page: 1, pagesize: 10, subjectName: '' },
      page: 3,
      total: 0,
      // 前台是否显示（键值对形式的对象
      hireEnum: {
        1: '是',
        0: '否'
      },
      dialogVisible: false,
      // 是否编辑
      isEdit: false
      // form: {
      //   name: 'abc',
      //   province: '潜江' // 从接口处取回
      // }
    }
  },
  created () {
    // 获取学科列表
    this.getSubjectList()
  },
  methods: {
    // 一页可以显示多少条
    handleSizeChange (pageSize) {
      this.params.pagesize = pageSize
      this.params.page = 1// 改变每页显示条数后，保持在第一页
      this.getSubjectList()
    },
    // 一共多少页
    async handleCurrentChange (pageNum) {
      this.params.page = pageNum
      this.params.subjectName = this.input
      this.getSubjectList(this.params)
    },
    // 删除学科功能
    removeSubject (data) {
      // 1.询问用户
      this.$confirm('此操作将永久删除该学科，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 2.调用接口
        await removeSubject(data)
        // 3.提示用户删除成功
        this.$message.success('删除成功')
        // 当某一页数据只有一条时,并且当前页码值大于1时,要让页数减1
        if (this.list.length === 1 && this.params.page > 1) {
          this.params.page--
        }
        // 4.刷新列表
        this.getSubjectList()
      })
    },
    // 顶部工具栏清除按钮功能-清除
    removeList () {
      this.input = ''
      this.params.subjectName = ''
      this.getSubjectList()
      this.params.page = 1
    },
    // 顶部工具栏搜索按钮功能-搜索
    async searchList () {
      const res = await getSubjectList({ subjectName: this.input })
      this.params.page = 1
      this.total = res.data.counts
      this.pages = res.data.pages
      this.list = res.data.items
    },
    // 日期的转换方法
    formDate (dateValue) {
      return dayjs(dateValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取详细列表数据
    async getSubjectList () {
      const res = await getSubjectList(this.params)
      // console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
      this.pages = res.data.pages
    },
    // 点击添加按钮，打开弹窗
    showDialog () {
      this.dialogVisible = true
    },
    // 点击修改按钮，打开弹窗
    showUpdateDialog (data) {
      this.dialogVisible = true
      this.$refs.dialogRef.getSubjectDetail(data)
      this.isEdit = true
    },
    // 点击X和蒙版时关闭弹窗
    closeDialog () {
      this.dialogVisible = false
      this.isEdit = false
    },
    // 点击学科分类按钮跳转到学科分类
    toDirectorys (id, subjectName) {
      this.$router.push({
        path: 'directorys',
        query: {
          id: id,
          subjectName: subjectName
        }
      })
    },
    // 点击学科标签按钮跳转到学科标签
    toTags (id, subjectName) {
      this.$router.push({
        path: 'tags',
        query: {
          id: id,
          subjectName: subjectName
        }
      })
    }
  }
}
</script>

<style scoped></style>
